<template>
  <div class="container" v-loading="isLoading">
    <el-card  :key="isKey">
      <template #header>
        <el-form inline ref="searchForm">
          <el-form-item label="社群" prop="news_type">
            <el-select style="width:500px" v-model="searchForm.id" placeholder="请选择社群">
              <el-option label="全部" value=""/>
              <el-option
                v-for="(oVal, oIdx) of type"
                :key="oIdx"
                v-bind="oVal"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList()">查询</el-button>
          </el-form-item>
        </el-form>
      </template>
      <el-table :data="tableData" border>
        <el-table-column prop="nick_name" label="实名信息" align="center"/>
        <el-table-column prop="name" label="申报社群" align="center"/>
        <el-table-column prop="sex" label="用户性别" align="center">
          <template slot-scope="{ row }">
            <div>{{row.sex=='1'?'男':'女'}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="phoneText" label="手机号" align="center"/>
        <el-table-column prop="identity_numText" label="身份证号" align="center" />
        <el-table-column prop="avatar_url" label="微信头像" align="center">
          <template slot-scope="{ row }">
            <el-image style="width: 100px; height: 100px"
            :src="row.avatar_url"
            :preview-src-list="[row.avatar_url]"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120px" align="center">
          <template slot-scope="{ row }">
            <el-button type="text" @click="auditing(row.id,row.community_id, '2')"
              >通过</el-button
            >
            <el-button type="text" @click="auditing(row.id,row.community_id, '3')"
              >不通过</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <footer class="footer">
      <el-pagination
        background
        layout="total, sizes, pager, jumper"
        :current-page="searchForm.page"
        :page-sizes="[20, 30, 50, 100]"
        :page-size="searchForm.page_size"
        :total="tableTotal"
        @size-change="changeSize"
        @current-change="changeCurrent"
      />
    </footer>
  </div>
</template>

<script>
import API from '@/api';
import { table } from "@/utils/mixins";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions } = createNamespacedHelpers("asyncStatus");
export default {
  mixins: [table],
  components: {
  },
  data: () => ({
    searchForm: {
      id:"",
      page: 1, // 当前页码
      per_page: 20, // 每页条数
    },
    type:[],
    builingForm: {
      $id:''
    },
  }),

  created() {
    API.getAsociationTypeList({ per_page: 60})
      .then(({data}) => {
        let type=data.items.map(item=>{
          return {label:item.name,value:item.id}
        })
        this.type=type
        this.getList()
      }).catch((err) => {
      }).finally(() =>{
      })
  },

  methods: {
    // 获取列表
    getList(){
      this.isLoading=true
      API.getAsociationJoinList(this.searchForm)
        .then(({data}) => {
          data.forEach(item=>{
              item.id=item.user_info.id
              item.nick_name=item.user_info.nick_name
              item.sex=item.user_info.sex
              item.phoneText=item.user_info.phone?item.user_info.phone.replace(/^(\d{3})\d{4}(\d+)/, '$1****$2'):'未填'
              item.identity_numText=item.user_info.identity_num?item.user_info.identity_num.replace(/^(.{6})(?:\d+).(.{4})$/,'$1****$2'):'未填写'
              item.avatar_url=item.user_info.avatar_url
              item.name=item.community_info.name
              item.community_id=item.community_info.id
            })
          this.tableData=data
          this.tableTotal=data.length
        }).catch((err) => {
          this.tableData=[]
          this.tableTotal=0
        }).finally(() =>{
          this.isLoading = false;
        })
    },

    // 分页
    changeSize(val){
      this.searchForm.per_page = val
      this.searchForm.page = 1
      this.getList()
    },

    // 分页
    changeCurrent(val){
      this.searchForm.page = val
      this.getList()
    },

    // 审核
    auditing(id,community_id,status){
      let _that=this
      let data={
        community_id:community_id,
        user_id:id,
        status:status
      }
      API.setAsociationJoinStatus(data)
        .then(({data}) => {
          this.$message.success("操作成功！");
        }).catch((err) => {
        }).finally(() =>{
          _that.getList()
        })
    }


  },
};
</script>

<style lang="scss" scoped></style>
